<template>
  <div class="switchas">
    <div class="imgList">
        <img :src="value" v-for="(value,index) in imgList" :key="value" @click="bigImg(index)">
    </div>
    <div class="imgMask" v-if="showBigImg" @click.stop="showBigImg=!showBigImg">
        <img class="prev"  @click.stop="prev" src="static/images/switch_left.png">
        <div class="showImg" >
            <img class="bigImg" :src="imgList[num]">
        </div>
        <img class="next"  @click.stop="next" src="static/images/switch_right.png">
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      showBigImg: false,
      num: 0,
      imgList: [
        "http://img.52z.com/upload/news/image/20181012/20181012094831_45698.jpg",
        "http://img.52z.com/upload/news/image/20180713/20180713092003_56539.jpg",
        "http://life.southmoney.com/tuwen/UploadFiles_6871/201811/20181101160809922.jpg",
        "http://pic.qqtn.com/up/2018-8/15355293035762541.jpg",
        "http://img.52z.com/upload/news/image/20180125/20180125084600_12382.jpg",
        "http://pic.qqtn.com/up/2018-11/15421590933125135.jpg"
      ]
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 点击图片放大
    bigImg(index) {
      this.showBigImg = true;
      this.num = index;
    },
    // 点击左边切换图片
    prev() {
      if (this.num == 0) {
        this.num = 6;
      }
      this.num--;
      console.log(this.num);
    },
    // 点击右边切换图片
    next() {
      if (this.num == 5) {
        this.num = -1;
      }
      this.num++;
    }
  },
  created() {},
  mounted() {}
};
</script>
<style scoped>
.switchas {
  width: 100%;
  height: 100%;
}
.imgList {
  margin: 0 auto;
  width: 900px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.imgList img {
  width: 50px;
  height: 60px;
  margin: 5px;
  cursor: pointer;
}
.imgMask {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
}
.showImg {
  height: 550px;
  width: 800px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 10px solid #fff;
}
.bigImg {
  width: 100%;
  height: 100%;
}
.prev {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 40px;
  transform: translate(10px, -50%);
  cursor: pointer;
}
.next {
  width: 40px;
  transform: translate(10px, -50%);
  position: absolute;
  top: 50%;
  right: 20px;
  cursor: pointer;
}
</style>